<template>
  <el-card class="box-card1" ref="boxcard1">
    <el-avatar shape="circle" :size="80" fit="fill" src="/img/Avatar.jpg" />
    <div class="content">
      <h2>
        {{
          $t(
            "home.welcome." +
              (date.getHours() >= 0 && date.getHours() < 12
                ? "morning"
                : date.getHours() >= 12 && date.getHours() < 18
                ? "afternoon"
                : "evening")
          ) + Dheader.header.row1.personalCenter.personal.petName
        }}
      </h2>
      <p>
        <span>Dadmin管理系统</span
        >旨在为用户提供大量组件，自由组合个人需求的系统功能
      </p>
    </div>
  </el-card>
</template>
<script lang="ts">
export default {
  // name: "card1",
};
</script>
<script lang="ts" setup>
import { useDheader } from "../../store/Dheader";
const Dheader = useDheader();
const date = new Date();

const boxcard1 = ref();
onMounted(() => {
  if (window.innerWidth < 1200 && window.innerWidth > 700)
    boxcard1.value.$el.style.width = Dheader.header.width - 40 + "px";
  else boxcard1.value.$el.style.width = "100%";
  watch(
    () => Dheader.header.width,
    (newValue, oldValue) => {
      if (window.innerWidth < 1200 && window.innerWidth > 700)
        boxcard1.value.$el.style.width = newValue - 40 + "px";
      else boxcard1.value.$el.style.width = "100%";
    }
  );
});
console.log();
</script>

<style lang="scss" scoped>
.box-card1 {
  width: 100%;
  min-width: 300px;
  height: 100%;
  min-height: fit-content;
  border: 0px;

  .el-avatar {
    float: left;
    margin: 10px;
  }
  .content {
    h2 {
      text-align: left;
      margin: 10px;
    }
    p {
      text-align: left;
      margin: 0px 10px;
      span {
        color: var(--theme-color);
        font-weight: bold;
      }
    }
  }
}
</style>
